<template>
	<view class="content ">
		<u-navbar :title="title" back-icon-color="#333" title-color="#333" :title-bold="true">
		</u-navbar>
		<view v-if="listData.length === 0" class="df aic jcc bgcf" style="height: 80vh;">
			<view class="tac">
				<image style="width: 428rpx;height: 360rpx;" src="../../../static/empty/address-empty.png" mode="widthFix"></image>
				<view class="fs28 c6 mt16">
					您还没有收货地址，现在添加一个吧！
				</view>
			</view>
		</view>
		<view class="p30" v-else>
			<view class="df fdc bgcf mb20 p020 bdr20" :class="{'disabled_address':LOCATION&&LOCATION.areaId!=item.areaId&&(isShopCart||confrimFlag)}" v-for="(item,index) in listData" :key="index"
				@click="clickAddress(item)">
				<view class="df fdc pt30 pb30">
					<view class="df aic jcfs fs32">
						<text class="c3 mr30 fwb fs30">{{item.shopName}}</text>
						<view class="defaultStyle fs24 cf" v-if="item.isDefault==0">
							默认
						</view>
						<!-- <view v-if="LOCATION&&LOCATION.areaId!=item.areaId&&(isShopCart||confrimFlag)" class=" fs24 cf disabled_box_tag">
							暂不可用
						</view> -->
					</view>
					<view class="c3 fs26 pt27">
						<text>{{item.receiver}}</text>
						<text class="ml10">{{item.phone}}</text>
					</view>
					<view class="c3 fs28 pt27 fwb">
						{{item.receiveAddress}}
					</view>
					<view class="c6 fs26" v-if="item.areaDetailAddress">
						{{item.areaDetailAddress||'--'}}{{item.homeNumber}}
					</view>
					<view class="c6 fs26 " v-else>
						{{item.province}}{{item.city}}{{item.area}}{{item.receiveAddress}}{{item.homeNumber}}
					</view>
				</view>
				<u-line color="#E5E5E5"></u-line>
				<view class="df aic jcsb fs22 pt27 pb27">
					<view class="df aic jcsa" @click.stop="defaultChange(item)">
						<u-icon name="checkmark-circle-fill" color="#33B775" size="34" v-if="item.isDefault==0"></u-icon>
						<text class="check-circle-box"  @click="editDefault(item)" v-else>
							<text class="check-circle"></text>
						</text>
						<text class="ml20 c48A147 fs24" v-if="item.isDefault==0">已设为默认地址</text>
						<text class="ml20 c9 fs24" v-else @click="editDefault(item)">设为默认地址</text>
					</view>
					<view class="df aic jcsb c6 fs24">
						<view class="df aic" @click.stop="pageJump('update',item)">
							<nmr-icon name="-tousu" size="30" color="#666"></nmr-icon>
							<text class="scapp iconfont-Vector mr5 ml5"></text>编辑
						</view>
						<view class="ml30 df aic" @click.stop="delectOpen(item)">
							<nmr-icon name="shanchu-6" size="30" color="#666"></nmr-icon>
							<text class="scapp iconfont-a-Group7856 mr5 ml5"></text>删除
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer df jcc">
			<u-button style="width: 702rpx;" type="success" shape="circle" :custom-style="customStyle"
				@click.stop="pageJump('add',null)">+新增收货地址</u-button>
		</view>
		<u-modal v-model="delectShow" :show-title="false" :show-cancel-button="true" content="确定要删除该地址吗？"
			confirm-color="#DC1B24" confirm-text="确定" :content-style="contentStyle" :cancel-style="cancelStyle"
			:confirm-style="cancelStyle" @confirm="itemDelect"></u-modal>
	</view>
</template>

<script>
	import {
		bMemberAddressselectList,
		shopAccountDel,bMemberAddressEdit 
	} from "@/api/address.js"
	export default {
		data() {
			return {
				customStyle: {
					background: 'linear-gradient(90deg, #48A147 0%, #8AE38A 100%)',
					borderColor: '#33B775',
				},
				listData: [],
				delectShow: false,
				contentStyle: {
					fontWeight: 600,
					color: '#333',
					fontSize: '28rpx',
				},
				cancelStyle: {
					fontSize: '28rpx',
				},
				delItem: null,
				confrimFlag: false, //来判断是否是确认订单进入
				isShopCart:false,//是否是购物车
				title: '收货地址',
				addressInfo: null,
				flag: '',
				calcGoodsList:'',
				stcok:''
			}
		},
		onLoad(res) {
			if (res.flag) {
				this.flag = res.flag
				this.addressInfo = JSON.parse(res.addressInfo)
			}
			if(res.isShopCart){
				this.isShopCart = res.isShopCart
				if(res.source=='theme'){
					this.calcGoodsList = res.goodsList
					this.stcok = res.stcok
				}
			}
			this.title = res.type ? '地址管理' : '选择地址'
			if (res.confrim) {
				this.confrimFlag = res.confrim
				// this.addressInfo = JSON.parse(res.addressInfo)
			}
		},
		onShow() {
			// 页面列表
			this.getList()
		},
		methods: {
			// 点击地址
			clickAddress(item) {
				if(this.LOCATION&&this.LOCATION.areaId!=item.areaId&&(this.confrimFlag||this.isShopCart)){
					this.$u.toast('当前地址暂不可用')
					return
				}
				// 从确认订单页面进入 
				if (this.confrimFlag) {
					
					uni.$emit('handelAddress', item)
					uni.navigateBack()
				}
				if (this.isShopCart) {
					
					if(this.calcGoodsList){
						uni.redirectTo({
							url:`/pages/confirm/index?flag=theme&goodsList=${this.calcGoodsList}&addressId=${item.addressId}&stcok=${this.stcok}`
						})
					}else{
						uni.redirectTo({
							url:'/pages/confirm/index?addressId='+item.addressId
						})
					}
					
				}
				
			},
			getList() {
				bMemberAddressselectList().then(res => {
					if (res.code === 200) {
						this.listData = res.data
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			pageJump(type, item) {
				const addressId = item === null ? null : item.addressId
				uni.navigateTo({
					url: `/pages/my/address/addAddress?type=${type}&addressId=` + addressId
				})
			},
			defaultChange(value) {
				if (value.isDefault) return
				const data = this.listData
				const parmars = {
					addressId: value.addressId,
				}
				// setAddressDefault(parmars).then(res => {
				// 	if (res.code === 200) {
				// 		this.getList()
				// 	} else {
				// 		uni.showToast({
				// 			title: res.message,
				// 			icon: 'none'
				// 		})
				// 	}
				// })
			},
			editDefault(e){
				bMemberAddressEdit({
					addressId:e.addressId,
					isDefault:0
				}).then(res =>{
					if(res.code==200){
						this.getList()
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							mask:true
						})
					}
				})
			},
			delectOpen(item) {
				this.delectShow = true
				this.delItem = item
			},
			itemDelect() {
				console.log(this.delItem)
				const addressId = this.delItem.addressId
				// if (this.addressInfo) {
				// 	if (addressId === this.addressInfo.addressId) {
				// 		uni.$emit('handelAddress', null)
				// 	}
				// }
				shopAccountDel(addressId).then(res => {
					if (res.code === 200) {
						this.getList()
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F5F5F5;
		font-family: PingFang SC-Medium, PingFang SC;
	}
</style>
<style scoped>
	.disabled_address{
		background-color: #e5e5e5 !important ;
	}
	.content {
		padding-bottom: 130rpx;
	}

	.check-circle-box {
		display: block;
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		border: 1rpx solid rgba(153, 153, 153, 0);
	}

	.check-circle {
		margin: 0 auto;
		display: block;
		width: 26rpx;
		height: 26rpx;
		border: 2rpx solid #D8D8D8;
		border-radius: 50%;
	}

	.footer {
		position: fixed;
		height: 150rpx;
		background: #FFFFFF;
		padding: 30rpx 0;
		bottom: 0;
		left: 0;
		width: 100%;
		text-align: center;
		box-shadow: 0px 0 4rpx 1rpx rgba(0, 0, 0, 0.16);
	}

	.defaultStyle {
		width: 100rpx;
		height: 40rpx;
		background: linear-gradient(90deg, #48A147 0%, #8AE38A 100%);
		border-radius: 44rpx;
		text-align: center;
		line-height: 40rpx;
	}
	.disabled_box_tag{
		margin-left: 5rpx;
		height: 40rpx;
		padding: 0 15rpx;
		border-radius: 44rpx;
		line-height: 40rpx;
		background-color: red;
	}

	.c48A147 {
		color: #48A147;
	}
</style>